<template>
    <template v-for="item in subMenuProps.subMenuList" :key="item.id">
        <router-link v-if="(!item.children || item.children.length <= 0)&&item.isHide==2" :to="item.routerUrl">
            <el-menu-item :index="item.routerUrl" @click="toNavOptionClick(item)">
                <el-icon>
                    <svg class="icon" aria-hidden="true">
                        <use :xlink:href="item.icon"></use>
                    </svg>
                </el-icon>
                <span>{{ item.title }}</span>
            </el-menu-item>
        </router-link>
        <el-sub-menu v-else-if="item.isHide==2" :index="item.routerUrl">
            <template #title>
                <el-icon>
                    <svg class="icon" aria-hidden="true">
                        <use :xlink:href="item.icon"></use>
                    </svg>
                </el-icon>
                <span>{{ item.title }}</span></template
            >
            <subMenu :subMenuList="item.children"></subMenu>
        </el-sub-menu>
    </template>
</template>

<script setup lang="ts">
import subMenu from "./sub_menu.vue";
import pinia from "@/store/store";
import piniaStore from "@/store";
const store = piniaStore(pinia);
let subMenuProps = defineProps(["subMenuList"]);

let toNavOptionClick = (raw: any) => {
    let optionItem = {
        id: raw.id,
        routerUrl: raw.routerUrl,
        title: raw.title,
        icon: raw.icon,
        isActive: true,
    };
    store.setNavOptions(optionItem);
    store.setCrumbs(optionItem.title);
};
</script>
<style lang="scss" scoped>
@import "@/static/css/common.scss";
</style>
